<template>
  <div>
    <!-- 查询部分 -->
    <BaseCard>
      <div class="base-search-form">
        <BaseForm v-bind="searchConfig" v-model:formData="searchFormData">
          <template #line-handle>
            <div class="flex-row-end">
              <el-button type="primary" :icon="Search" @click="search">
                搜索
              </el-button>
              <el-button :icon="Refresh" @click="reset">重置</el-button>
              <el-button type="primary" plain :icon="Plus" @click="create">新增</el-button>
              <el-button type="danger" plain :icon="Minus" @click="batchDelete">批量删除</el-button>
            </div>
          </template>
        </BaseForm>
      </div>
    </BaseCard>
    <!-- 新增修改部分 -->
    <BaseModalForm ref="baseModalFormRef" :modalFormConfig="modalFormConfig" :dialogConfig="dialogConfigRpe"
      :modalFormData="modalFormData" @change="modalFormItemChange" :showPagination="true" @confirm="confirm">
    </BaseModalForm>
    <!-- 表格部分 -->
    <div class="-mt-20">
      <BaseCard>
        <div class="handle-table">
          <div class="table-header">违规列表</div>
        </div>
        <BaseTable :data="list" :total="total" v-bind="tableConfig" @selectionChange="selectionChange"
          v-model:pageInfo="pageInfo">
          <!-- 特殊处理方式 -->
          <template #gender="scope">
            <div>{{ scope.row.gender == 1 ? "男" : "女" }}</div>
          </template>
          <!-- 操作表格插槽 -->
          <template #handle="scope">
            <div>
              <el-button type="primary" round size="small" @click="editRow(scope.row)"> 编辑 </el-button>
              <el-button type="danger" round size="small" @click="deleteRow(scope.row)"> 删除 </el-button>
            </div>
          </template>
        </BaseTable>
      </BaseCard>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue"
import { searchConfig } from "./config/search.config"
import { tableConfig } from "./config/table.config";
import { modalFormConfig, dialogConfig } from "./config/modal.config"
import { Plus, Refresh, Minus, Search } from "@element-plus/icons-vue";
import { initFormData } from "@/utils/init";
import { getViolationList } from "@/api/storeMg/violation"
import message from "@/utils/message";

// 弹框表单dom
const baseModalFormRef = ref()

// 弹框代理对象
const dialogConfigRpe = ref(dialogConfig)

// 查询表格条件
const searchFormData = ref(initFormData(searchConfig.formItems))

// 表格数据
const list = ref([])

// 选中表格数据
const selectList = ref([])

// 表单弹框绑定的数据
const modalFormData = ref(initFormData(modalFormConfig.formItems))

// 表格总数
const total = ref(0)

// 分页
const pageInfo = ref({ page: 1, size: 10 });

onMounted(() => {
  initTableData()
})

watch(pageInfo, (newValue) => {
  initTableData();
});

// 初始化表格数据
const initTableData = () => {
  getViolationList({ ...searchFormData.value, ...pageInfo.value }).then(res => {
    list.value = res.data.list
    total.value = res.data.total
  })
}

// 查询
const search = () => {
  initTableData()
}

// 重置
const reset = () => {
  searchFormData.value = initFormData(searchConfig.formItems)
  initTableData()
}

// 表格多选
const selectionChange = (value) => {
  selectList.value = value
}

// 新增
const create = () => {
  dialogConfigRpe.value.title = "新增违规"
  modalFormData.value = initFormData(modalFormConfig.formItems)
  baseModalFormRef.value.open()
}

// 批量删除
const batchDelete = () => {
  if (selectList.value.length === 0) {
    message.error("请选择需要删除的数据")
    return
  }
  message.confirm("此操作将删除选中的数据, 是否继续?", async (res) => {
    if (res) {
      console.log(`发送批量删除数据请求->`, selectList.value)
    }
  });
}

// 编辑当前行
const editRow = (row) => {
  dialogConfigRpe.value.title = "新增违规"
  modalFormData.value = JSON.parse(JSON.stringify(row))
  baseModalFormRef.value.open()
}

// 删除当前行
const deleteRow = (row) => {
  message.confirm("此操作将删除选中的数据, 是否继续?", async (res) => {
    if (res) {
      console.log(`发送删除当前行数据请求->`, row)
    }
  });
}

// 确定添加修改
const confirm = (form) => {
  console.log(`发送新增/修改请求->`, form)
}

// 处理弹框表单每一项change复杂场景
const modalFormItemChange = (value, field) => {
  console.log(`value->`, value)
  console.log(`field->`, field)
}
</script>
<style scoped lang="less"></style>